<!--  -->
<template>
  <div class="navBar">
    <div class="left">
        <img src="@/assets/logo.png" @click="$router.push('/')">
    </div>
    <div class="center">
        <p>
            请输入内容
            <van-icon class="iconNav" name="search"/>
        </p>
    </div>
    <div class="right">
       <img :src="imgUrl" alt=""  @click="$router.push('/userinfo')" v-if="imgUrl"/>
        <img src="@/assets/default_img.jpg" @click="$router.push('/login')" v-else>
        <p>下载App</p>
    </div>
  </div>
</template>

<script>
export default {
 
  data () {
    return {
      imgUrl:''
    };
    
  },
  methods: {
    async NavInit() {
            if(localStorage.getItem('token')){
              const res = await this.$http.get('/user/' + localStorage.getItem('id'))
              this.imgUrl = res.data[0].user_img
            }
        }
  },
  mounted(){
     this.NavInit();
  }


}

</script>

<style scoped>
    .navBar{
        height: 12.5vw;
        background-color: white;
        display: flex;
    }
  .navBar .left{
      display: flex;
      justify-content: center;
      align-items: center;
      width: 25vw;
  }  
   .navBar .left img{
       width: 100%;
   }
     .navBar .right {
         display: flex;
         justify-content: center;
         align-items: center;
     }
   .navBar .right img{
      border-radius: 50%;
       width: 6.944vw;
       height: 6.944vw;
   }
   .navBar .right p{
        margin: 0 2.778vw;
        font-size: 3.611vw;
        background-color: #fb7299;
        padding: 1.389vw 2.778vw;
        text-align: center;
        border-radius: 0.833vw;
        color: white;
   }
    .navBar .center{
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0 1.389vw;
    }
     .navBar .center p{
        background-color: #f4f4f4;
        height: 6.667vw;
        line-height:6.667vw ;
        width: 100%;
        border-radius: 3.333vw;
        position: relative;
        font-size: 12px;
        padding-left:30px;
        color: #aaa;
     }
     .navBar .center p .iconNav{
        color: #aaa;
        position: absolute;
        left: 2.778vw;
        top: 50%;
        transform: translate(0,-50%);
     }
</style>